<!-- 机构账号审核 -->
<!-- 机构账号列表 -->
<template>
  <div class="institution-list">
    <div class="search">
      <el-form ref="form" :model="queryMap.params" label-width="0">
        <el-form-item>
          <el-input
            v-model="queryMap.params.account"
            placeholder="机构名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" icon="el-icon-search"  @click="search">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="Add">添加</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{
        background: '#f2f3f4',
        color: '#555',
        'font-weight': 'bold',
        'line-height': '32px',
      }"
      style="width: 100%; height: 100%; overflow: auto"
    >
      <el-table-column prop="account" label="机构账号" width="100">
      </el-table-column>
      <el-table-column prop="name" label="机构名称" width="150">
      </el-table-column>
      <el-table-column prop="password" label="机构密码" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="机构联系电话" width="120">
      </el-table-column>
      <el-table-column prop="address" label="机构地址" width="240">
      </el-table-column>
      <el-table-column prop="license" label="营业执照" width="200">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.license"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="营业执照编码"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <!-- <el-button
            type="primary"
            icon="el-icon-view"
            size="small"
            @click="view(scope.row)"
            >查看</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="update(scope.row)"
            >修改</el-button
          > -->
            <el-button
            type="primary"
            icon="el-icon-check"
            size="small"
            @click="examine(scope.row,1)"
            >通过</el-button
          >
            <el-button
            type="danger"
            icon="el-icon-close"
            size="small"
            @click="examine(scope.row,2)"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryMap.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryMap.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      top="10px"
      :before-close="handleClose"
    >
      <div>
        <el-form ref="form" :model="postForm" :disabled="disabled" label-width="120px">
          <el-form-item label="机构名称">
            <el-input v-model="postForm.name"></el-input>
          </el-form-item>
          <el-form-item label="机构账号">
            <el-input v-model="postForm.account"></el-input>
          </el-form-item>
          <el-form-item label="机构密码">
            <el-input v-model="postForm.password"></el-input>
          </el-form-item>
          <el-form-item label="机构联系电话">
            <el-input v-model="postForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="机构地址">
            <el-input v-model="postForm.address"></el-input>
          </el-form-item>
          <el-form-item prop="license" label="营业执照">
            <el-upload
              class="avatar-uploader"
              :action="server"
              accept=".jpg,.jepg,.png"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <div v-if="postForm.license">
                <img
                  class="el-upload-list__item-thumbnail avatar"
                  v-if="postForm.license"
                  :src="postForm.license"
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click.stop="handlePictureCardPreview()"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                </span>
              </div>

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="营业执照编码">
            <el-input v-model="postForm.licenseCode"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!disabled" @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="!disabled" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="imgVisible" top="20px">
      <img width="100%" :src="postForm.license" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchAuditPaging,
  fetchGet,
  fetchSave,
  fetchUpdate,
  fetchDelete,
  fetchAudit,
} from "@/api/institution/index.js";
export default {
  data() {
    return {
      title: "查看",
      tableData: [],
      currentPage4: 4,
      total: 0,
      server: `${process.env.VUE_APP_BASE_API}/common/api/file/upload`,
      queryMap: {
        current: 1,
        orderBy: "",
        params: {
          account: "",
          address: "",
          id: "",
          license: "",
          licenseCode: "",
          name: "",
          password: "",
          phone: "",
        },
        size: 10,
      },
      postForm: {
        account: "",
        address: "",
          id: "",
        license: "",
        licenseCode: "",
        name: "",
        password: "",
        phone: "",
      },
      dialogVisible: false,
      imgVisible: false,
      disabled: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handlePictureCardPreview(file) {
      this.imgVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.postForm.license = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async onSubmit() {
      if(this.postForm.id){
        let data = fetchUpdate(this.postForm);
        console.log(data)
        this.dialogVisible = false;
        this.getList();
        this.$message.success("修改成功");
      }else{
        let data = await fetchSave(this.postForm);
        this.dialogVisible = false;
        this.getList();
        this.$message.success("添加成功");
      }

    },
    async details(id) {
      let res = await fetchGet(id);
      console.log(res);
      this.postForm = res.data;
    },
    getList() {
      fetchAuditPaging(this.queryMap).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
      });
    },
    search() {
      this.queryMap.current = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryMap.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryMap.current = val;
      this.getList();
    },
    handleClose(done) {
      done();
    },
    view(item) {
      this.dialogVisible = true;
      this.title = "查看";
      this.details(item.id);
      this.disabled = true;
    },
    Add(item) {
      this.dialogVisible = true;
      this.title = "添加";
      this.disabled = false;
    },
    update(item) {
      this.dialogVisible = true;
      this.title = "编辑";
      this.details(item.id);
      this.disabled = false;
    },
    delete() {
      console.log("删除");
    },
    //审核
    async examine(row,type) {
      let data = await fetchAudit({id:row.id, auditState:type});
      if(data.code == 200) {
        this.$message.success("审核成功");
        this.getList();
      } else {
        this.$message.error("审核失败");
      }
    }
  },
};
</script>
<style lang="less" scoped>
.institution-list {
  height: calc(100vh - 100px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
}
/deep/ .avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
/deep/ .el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  &:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
  }
  span {
    cursor: pointer;
  }
  &:hover {
    opacity: 1;
  }
}
</style>
